<template>
  <div class="open" :class="{on: !show}">
    <div class="div">
      <p></p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref , computed} from 'vue';
const props = defineProps({
  show:{
    type:Boolean,
    default:false,
  }
})

</script>

<style lang="scss" scoped>
.open{
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: flex-end; cursor: pointer;
  .div{width:58%; line-height: 0;}
  .div::after,.div::before{display: block; content: ''; background-color: #000; border-radius: 3px;height: 2px;}
  .div::before{width: 100%;}
  .div::after{width: 80%;}
  p{height: 4px; width: 100%;}
  &.on{
    .div::before{width: 80%;}
    .div::after{width: 100%;}
  }
}
</style>